<template>
    <div id="moviePage" >
        <!-- 电影详情 -->
        <div class="movie-detail">
            <div class="mask" :style="{'backgroundImage':`url(${picFix(detailMovie.img)})`}"></div>
            <div class="cover"><img :src="picFix(detailMovie.img)" alt=""></div>
            <div class="detail">
                <div class="title textover1">{{detailMovie.nm}}</div>
                <div class="title-en textover1">{{detailMovie.enm}}</div>
                <div class="grade textover1">暂无评分</div>
                <div class="cat textover1">{{detailMovie.cat}}</div>
                <div class="fra textover1">{{detailMovie.src}} / {{detailMovie.dur}}分钟</div>
                <div class="pubDesc textover1">{{detailMovie.pubDesc}}</div>
            </div>
            <div class="more"></div>
        </div>
        <!-- 时间表 -->
        <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide id="swiper_con"  v-for="item in showDay.dates" :key="item.id" >
                <div class="swiper_time">{{item.date}}</div>
            </swiper-slide>
        </swiper>
        <!-- 筛选 -->

        <!-- 影院列表 -->
        <div class="cinemas-list">
            <ul v-infinite-scroll="loadMore">
                <li v-for='cin in cinemas' :key='cin.id' @click="toShows(cin.id)">
                    <div class="title-block">
                        <div class="title">
                            <span class="name">{{cin.nm}}</span>
                            <span class="sellPrice">
                                <span class="price">{{cin.sellPrice}}</span>元起
                            </span>
                        </div>
                        <!-- 地点 -->
                        <div class="location">
                            <span class="addr textover1">{{cin.addr}}</span>
                            <span class="distance textover1">{{cin.distance}}</span>
                        </div>
                        <!-- 改签小吃等 -->
                        <div class="label" v-if='cin.tag.sell'>
                            <span class="label_span1" v-if='cin.tag.sell'>改签</span>
                            <span class="label_span2" v-if='cin.tag.snack'>小吃</span>
                            <span class="label_span3" v-if='cin.tag.vipTag'>折扣卡</span>
                        </div>
                        <!-- 开卡特惠 -->
                        <div class="label_vip">
                            <span>开卡特惠</span>
                        </div>
                        <div class="showTimes">
                            近期场次：{{cin.showTimes}}
                        </div>
                    </div>
                </li>
            </ul>
            <mt-spinner>努力加载中...</mt-spinner>
        </div>
    </div>
</template>

<script>
import '../scss/movie.scss';
// 
import qs from 'qs';

export default {
    created(){
        // 获取今天日期
        this.day = this.today();
        // 接收点击传过来的对应电影对象的ID(整个电影对象)
        this.movieId = this.$route.params.movieId ;
        // 电影详情
        /* 异步操作，当完成获取数据后，才执行then() */
        //
        this.axios.get('/maoyan/ajax/detailmovie' ,{
            params:{
                movieId: this.movieId
            }
            /* then(res)的res数据是整个detailmovie信息 */
        }).then((res)=>{
            // console.log(res.data);
            /* 把电影数据的detailMovie保存到当地 */
            this.detailMovie = res.data.detailMovie;
            this.$store.commit('changeHT',this.detailMovie.nm)
        })
        var timestamp = (new Date()).getTime();
        // 影院信息
        this.getCinemas(this.day,0);

    },
    
    computed:{
      swiper() {
        //   获取swiper实例里的数据，包含改变index的方法
        return this.$refs.mySwiper.swiper
      }
    },
    data(){
        return {
            // 点击获取的时间数据
            clickTime:'',
            // 展示时间
            showDay:'',
            movieId : '',
            detailMovie:'',
            cinemas:[],
            day:this.day,
            offset:0,
             swiperOption: {
                slidesPerView: 3,
                spaceBetween: 30,
                freeMode: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                on:{
                    click:()=>{
                        // console.log('hahaha');
                        // 获取该时间点
                        this.cinemas = [];
                        this.clickTime =this.swiper.clickedIndex;
                        this.day = this.showDay.dates[this.clickTime].date;
                        //调用渲染对应的函数
                        this.offset = 0;
                        this.getCinemas(this.day,this.offset);
                    },
                },
            }
        }
    },
    methods:{
        //获取当前的时间
        today(){
            let d = new Date();
            let year = d.getFullYear();
            let month = d.getMonth()+1;
            let day = d.getDate();
            return year +'-'+month+'-'+day;
        },
        //如果url是字符串就替换图片的的尺寸
        picFix(url){
            if(typeof url == 'string'){
                return url.replace('w.h','128.180');
            }
        },
        toShows(cinemaId){
            this.$router.push({name:'shows', 
                params:{ cinemaId : cinemaId },
                query:{movieId: this.id,}
            })
        },
        getCinemas(day,offset){
            this.axios.post('/maoyan/ajax/movie' ,qs.stringify({
                movieId: this.movieId,
                day: day,
                offset: offset,
                limit: 20,
                districtId: -1,
                lineId: -1,
                hallType: -1,
                brandId: -1,
                serviceId: -1,
                areaId: -1,
                stationId: -1,
                item: "",
                updateShowDay: true,
                reqId: 1545367192578,
                cityId: 20,
            })
            ).then((res)=>{
                console.log( res.data );
                this.cinemas = this.cinemas.concat(res.data.cinemas);
                this.showDay = res.data.showDays;
            })
        },
        loadMore(day,offset){
            this.offset += 20;
            this.getCinemas(this.day,this.offset)
        },
    }

}
</script>

